let echarts = require('echarts/lib/echarts')
let elementResizeDetectorMaker = require("element-resize-detector")

export default {
    powerEchart: function (data) {
        var value = data;
        var color = new echarts.graphic.LinearGradient(
            0, 0, 1, 0,
            [{
                offset: 0,
                color: "#58D9F9",
            },
            {
                offset: 1,
                color: "#4992FF",
            }
            ]
        );
        let option = {
            series: [{
                type: 'gauge',
                radius: '165%',
                center: ['50%', '80%'],
                startAngle: 180,
                endAngle: 0,
                min: 0,
                max: 100,
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: [
                            [1, '#999']
                        ],
                        width: 1,
                        opacity: 1
                    }
                },
                title: {
                    show: false
                },
                detail: {
                    show: false,
                    backgroundColor: '#fff',
                    borderColor: '#999',
                    borderWidth: 2,
                    width: '80%',
                    borderRadius: 4,
                    offsetCenter: [0, '50%'],
                    formatter: function (value) {
                        return '{value|' + value.toFixed(0) + '}{unit|km/h}';
                    },
                    rich: {
                        value: {
                            fontSize: 50,
                            fontWeight: 'bolder',
                            color: '#777'
                        },
                        unit: {
                            fontSize: 20,
                            color: '#999',
                            padding: [0, 0, 15, 6]
                        },
                    }
                },
                // axisLine: {
                //     show: false
                // },
                axisTick: {
                    length: 4,
                    lineStyle: {
                        color: '#999'
                    }
                },
                splitLine: {
                    show: false,
                    length: 6,
                    lineStyle: {
                        color: '#999',
                        width: 1
                    }
                },
                axisLabel: {
                    distance: 10,
                    color: '#999',
                    fontSize: 6,
                },
                pointer: {
                    width: 2,
                    length: '70%'
                },
                itemStyle: {
                    color: color,
                    shadowColor: 'rgba(0,138,255,0.45)',
                    shadowBlur: 10,
                    shadowOffsetX: 2,
                    shadowOffsetY: 2
                },
                data: [{
                    value: value,
                },]
            },
            {
                type: 'gauge',
                radius: '140%',
                center: ['50%', '80%'],
                startAngle: 180,
                endAngle: 0,
                min: 0,
                max: 1000,
                title: {
                    show: false
                },
                detail: {
                    show: false
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        width: 6,
                        color: [
                            [
                                value / 100, color
                            ],
                            [
                                1, 'rgba(225,225,225,0.4)'
                            ]
                        ],
                    }
                },
                axisTick: {
                    show: false,
                },
                splitLine: {
                    show: false,
                },
                axisLabel: {
                    show: false
                },
                pointer: {
                    show: false,
                },
                itemStyle: {
                    normal: {
                        color: '#54F200',
                    }
                },
            }
            ]

        }
        var chartDom = document.getElementById('device-power')
        var myChart = echarts.init(chartDom)
        myChart.setOption(option)
        window.addEventListener('resize', () => {
            myChart.resize()
        })
        let erd = elementResizeDetectorMaker();
        erd.listenTo(document.getElementById("device-power"), function (element) {
            myChart.resize()
        })
        return myChart
    },
    voltageEchart: function (data) {
        var value = data;
        let option = {
            series: [
                {
                    type: 'gauge',
                    radius: '130%',
                    center: ['50%', '80%'],
                    startAngle: 180,
                    endAngle: 0,
                    min: 0,
                    max: 100,
                    // splitNumber: 12,
                    itemStyle: {
                        color: '#8decec',
                    },
                    progress: {
                        show: true,
                        width: 4,
                    },
                    pointer: {
                        show: false
                    },
                    axisLine: {
                        lineStyle: {
                            width: 4
                        }
                    },
                    axisTick: {
                        distance: -10,
                        length: 1,
                        splitNumber: 5,
                        lineStyle: {
                            width: 0.5,
                            color: '#999'
                        }
                    },
                    splitLine: {
                        distance: -8,
                        length: 2,
                        lineStyle: {
                            width: 1,
                            color: '#999'
                        }
                    },
                    axisLabel: {
                        distance: -4,
                        color: '#999',
                        fontSize: 4,
                    },
                    anchor: {
                        show: false
                    },
                    title: {
                        show: false
                    },
                    detail: {
                        valueAnimation: true,
                        width: '50%',
                        lineHeight: 20,
                        borderRadius: 8,
                        offsetCenter: [0, '-20%'],
                        fontSize: 12,
                        fontWeight: 'bolder',
                        formatter: '{value} °C' + '\n' + '当前温度',
                        color: 'auto'
                    },
                    data: [
                        {
                            value: value
                        }
                    ]
                },
            ]
        };
        var chartDom = document.getElementById('device-voltage')
        var myChart = echarts.init(chartDom)
        myChart.setOption(option)
        window.addEventListener('resize', () => {
            myChart.resize()
        })
        let erd = elementResizeDetectorMaker();
        erd.listenTo(document.getElementById("device-voltage"), function (element) {
            myChart.resize()
        })
        return myChart
    },
    lineEchart: function (id, data) {
        let value = data.valueData.map(item => {
            item.type = 'line'
            // item.stack = 'Total'
            item.data = item.val
            return item
        })
        console.log(value);
        let option = {
            title: {
                show: false,
                text: 'Stacked Line'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {},
            grid: {
                left: '3%',
                right: '3%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: data.XData
            },
            yAxis: {
                type: 'value'
            },
            series: value
        };
        var chartDom = document.getElementById(id)
        var myChart = echarts.init(chartDom)
        myChart.setOption(option)
        window.addEventListener('resize', () => {
            myChart.resize()
        })
        let erd = elementResizeDetectorMaker();
        erd.listenTo(document.getElementById(id), function (element) {
            myChart.resize()
        })
        return myChart
    },
    pieEchart: function (id, data) {
        let option = {
            title: {
                show: false,
                text: 'Referer of a Website',
                subtext: 'Fake Data',
                left: 'center'
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                left: 'left'
            },
            series: [
                {
                    name: 'Access From',
                    type: 'pie',
                    radius: '50%',
                    data: data,
                    // data: [
                    //     { value: 1048, name: 'Search Engine' },
                    //     { value: 735, name: 'Direct' },
                    //     { value: 580, name: 'Email' },
                    //     { value: 484, name: 'Union Ads' },
                    //     { value: 300, name: 'Video Ads' }
                    // ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        var chartDom = document.getElementById(id)
        var myChart = echarts.init(chartDom)
        myChart.setOption(option)
        window.addEventListener('resize', () => {
            myChart.resize()
        })
        let erd = elementResizeDetectorMaker();
        erd.listenTo(document.getElementById(id), function (element) {
            myChart.resize()
        })
        return myChart
    },
    dataEchart: function (info) {
        // let base = +new Date(info.startTime);
        // let oneDay = 24 * 3600 * 1000;
        // let date = [];
        // for (let i = 1; i < info.timeLength; i++) {
        //     var now = new Date((base += oneDay));
        //     date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'));
        // }
        let option = {
            tooltip: {
                show: false,
                trigger: 'axis',
                position: function (pt) {
                    return [pt[0], '10%'];
                }
            },
            title: {
                top: '10px',
                left: 'center',
                text: '今日用电量(' + info.unit + ')',
                textStyle: {
                    fontWeight: 400,
                    fontSize: 14,
                    fontFamily: 'SourceHan',
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: info.XData
            },
            yAxis: {
                type: 'value',
                boundaryGap: [0, '100%']
            },
            dataZoom: [
                {
                    type: 'inside',
                    start: 0,
                    end: 20
                },
                {
                    start: 0,
                    end: 20
                }
            ],
            series: [
                {
                    name: 'Fake Data',
                    type: 'line',
                    symbol: 'none',
                    sampling: 'lttb',
                    itemStyle: {
                        color: 'rgb(255, 70, 131)'
                    },
                    areaStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            {
                                offset: 0,
                                color: 'rgb(255, 158, 68)'
                            },
                            {
                                offset: 1,
                                color: 'rgb(255, 70, 131)'
                            }
                        ])
                    },
                    data: info.data
                }
            ]
        };
        var chartDom = document.getElementById('chart-data')
        var myChart = echarts.init(chartDom)
        myChart.setOption(option)
        window.addEventListener('resize', () => {
            myChart.resize()
        })
        let erd = elementResizeDetectorMaker();
        erd.listenTo(document.getElementById("chart-data"), function (element) {
            myChart.resize()
        })
        return myChart
    }
}
